技術 Day 25 - Service Worker 快取策略與更新陷阱

昨天我們介紹了 Service Worker 的核心特性、生命週期、Cache API。今天要往前一步，來看看 快取策略，以及開發時很容易踩到的 更新陷阱。...

技術 Day 24 - 從頭瞭解 Service Worker：離線、快取、背景同步

想讓網站在沒網路也能開、重複資源不再每次都下載、頁面秒開又省流量？這些日常體驗的升級，靠的就是 Service Worker。它像「瀏覽器內建的代理層」，能攔截...

技術 工作散記 - 在本機開發環境建置MSW

MSW，顧名思義是使用 Service Worker 實作 API mocking 的套件，在今年的 JSDC 也有大大分享這個。主要看點之一就是它可以在 n...

技術 PWA：Service Worker 在網頁關掉之後還會繼續跑

PWA 的重點就是這個 Service Worker 了，可以做到離線還能使用，主要都是靠它在幫忙。這個 Service Worker 到底有什麼厲害的呢？ 雖...

技術 Day5 - Vue & Webpack & Service Worker 工欲善其事必先利其器

這一篇有跟大家介紹了Service Worker的應用，今天想帶一下Webpack，強大的打包工具。我會希望我的前端，能夠用到Webpack + Service...

技術 Day2-Vue & Service Worker(PWA)

近期開發專案的時後，發現前端的世界相較於後端好像越來越好玩，但也就比較難搞一點，常常小問題就會卡很久，不過看到自已的前端專案效能變的更好，成就感還是很好的。目前...

技術 Day28-Push Notification伺服器推播訊息實作

昨天我們拿到Public Key和Private Key，現在要來使用這些權限，讓伺服器成功推播訊息到使用者裝置上。 情境 使用者新增文章的時候，會觸發之前我們...

技術 Day26-Push API與推播互動監聽事件

昨天實做sw.showNotification();的方法，送推播訊息至用戶端裝置，但訊息推出去，我們總期望會需要知道使用者對訊息的反應，因此，可以透過noti...

技術 Day7-Service Worker 走訪Lifecyle(程式篇)

昨日我們過目Service Worker的生命週期後，今天第一步，在專案/public，底下建立一個service-worker的js檔案。檔案名稱可以隨自己開...

技術 Day 28 - 30 天 Progressive Web App 學習筆記 - To-Do List 搭配 React + Redux 實作 PWA

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA，而內容會假設讀者已經熟悉 Re...

技術 Day 19 - 30 天 Progressive Web App 學習筆記 - 實作 PWA To-Do List - 顯示待辦事項清單

今天預計開始實作 To-Do List 的功能，先顯示待辦事項的行為並且串接 Restful API，模擬實際專案的情形。 To-Do List 需求 在開發...

技術 Day 17 - 30 天 Progressive Web App 學習筆記 - Service Worker - Handling Fetch Requests

今天筆記內容是要來了解 Service Worker 的 fetch 事件。 fetch 事件的觸發時機 如何攔截 Requests？ 如何處理攔截到的 Re...

技術 Day 16 - 30 天 Progressive Web App 學習筆記 - Service Worker - Clearing Old Cache

為什麼要清除 Old Cache？ 在前面的文章有講到，我們會去 註冊 Service Worker ，接著在 install 的事件裡進行 Pre-cache...

技術 Day 15 - 30 天 Progressive Web App 學習筆記 - Service Worker - Setting up the Default Cache

一開始會註冊 Service Worker，接著會進到 install 事件，通常我們會在這個事件裡面去快取網站的靜態檔案（App Shell），實作本篇文章的...

技術 Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker

之前的文章裡有介紹 Service Worker 的觀念，今天要進行 Service Worker 的第一步：透過簡單的範例來註冊 Service Worker...

技術 Day 11 - 30 天 Progressive Web App 學習筆記 - Chrome devTools - Introducing the Application tab

打造 Progressive Web App 必須建立許多核心技術，包括 Service Workers 和 Web App Manifests 並搭配 Cac...

技術 Day 10 - 30 天 Progressive Web App 學習筆記 - Service Work 簡介

今天筆記的是 Service Worker 的觀念，較深入的部份將會在之後的文章，透過實作再來做細部說明。 Service Worker 是非常強大的 offl...